<template>
  <div class="index-score-info">
    <el-form
      ref="scoreInfoForm"
      :label-position="'top'"
      :rules="rules"
      :model="scoreInfo"
      size="small"
      class="form_box">
      <el-form-item prop="totalScore" :label="infoType === 'model' ? '模型总分' : '指标总分'">
        <el-input
          v-model="scoreInfo.totalScore"
          :placeholder="infoType === 'model' ? '请输入模型总分' : '请输入指标总分'"
          type="number"
          :min="0"
          :max="totalScore"
          :disabled="pageType === 'view'"></el-input>
      </el-form-item>
      <el-form-item v-if="infoType === 'index'" prop="assessInfo" label="评价说明">
        <el-input
          v-model="scoreInfo.assessInfo"
          placeholder="'请输入指标评价说明"
          :disabled="pageType === 'view'"></el-input>
      </el-form-item>
      <el-form-item v-if="infoType === 'index'" prop="options" label="评价选项">
        <div v-if="scoreInfo.options.length === 0" class="no-options">
          此项指标无须评价，评价人通过对最末级指标进行评价，求和计算此项指标分。
        </div>
        <template v-else>
          <div v-for="option in scoreInfo.options" :key="option.optionId" class="option-item">
            <div class="option-index">
              <el-input
                v-model="option.optionLabel"
                class="option-name"
                placeholder="'请输入选项内容"
                :disabled="pageType === 'view'"></el-input>
              <span class="option-label">对应分值</span>
              <div class="option-score">
                <el-input
                  v-model="option.optionScore"
                  type="number"
                  :max="100"
                  :min="0"
                  class="option-score-input"
                  placeholder="'请输入选项分数"
                  :disabled="pageType === 'view'"></el-input>
                <span class="unit">%</span>
              </div>
            </div>
            <div class="option-cont">
              <el-input
                type="textarea"
                v-model="option.optionContent"
                class="option-content"
                placeholder="请输入选项内容"
                :autosize="{ minRows: 1, maxRows: 3 }"
                maxlength="60"
                :disabled="pageType === 'view'"></el-input>
            </div>
          </div>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'IndexScoreInfo',
  props: {
    // 信息类型，model-模型信息，index-指标信息
    infoType: {
      type: String,
      default: 'model',
    },
    info: {
      type: Object,
      default: () => {},
    },
    // 模型总分数或者指标父级总分数
    totalScore: {
      type: Number,
      default: 100,
    },
  },
  watch: {
    info: {
      handler(obj) {
        if (obj && obj.id) {
          if (this.infoType === 'model') {
            this.scoreInfo.totalScore = Number(obj.modelScore)
          } else {
            this.scoreInfo = {
              totalScore: Number(obj.targetScore),
              assessInfo: obj.assessInfo || '',
              options: obj.optionEntityRequests || [],
            }
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    pageType() {
      return this.$route.query.type || 'add'
    },
  },
  data() {
    return {
      scoreInfo: {
        totalScore: 0, // 总分
        assessInfo: '', // 评价说明
        options: [], // 评价选项
      },
      rules: {
        totalScore: [
          { required: true, message: this.infoType === 'model' ? '请输入模型总分' : '请输入指标总分', trigger: 'blur' },
        ],
      },
    }
  },
}
</script>
<style lang="scss">
.index-score-info {
  .el-form-item .option-item {
    margin-bottom: 16px;
    .option-index {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      .option-name {
        width: 30%;
      }
      .option-score {
        width: 40%;
        position: relative;
        display: flex;
        .option-score-input {
          width: 70%;
        }
        .unit {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
